<template>
	<div class="game-container report-container addAgent-container">
		<div class="line-member"></div>
		<div class="addAgent-content">
			<div class="form-header">
				<span>{{ $t('agent.member_convert_agent_apply_info') }}</span>
				<span>
					<code style="color:#FF3B30;">*</code>
					{{ $t('common.add_dialog_tips') }}
				</span>
			</div>
			<el-form ref="form" :model="form" :rules="rules" label-width="auto">
				<el-form-item
					:label="$t('common.choose_merchant') + ':'"
					prop="merchantId"
				>
					<merchant-select
						v-model="form.merchantId"
						:placeholder="$t('common.please_choose')"
						style="width: 365px"
						@change="selectMerchantHandle"
					></merchant-select>
					<span v-show="tipsMerchantShow" class="tips">
						{{ tipsMerchantShow }}
					</span>
				</el-form-item>
				<el-form-item
					:label="$t('agent.transfer_member') + ':'"
					prop="userName"
				>
					<el-input
						v-model="form.userName"
						size="medium"
						maxlength="11"
						:placeholder="$t('common.please_enter')"
						clearable
						style="width: 365px"
						@blur="checkValue"
					></el-input>
					<span v-show="tipsShow" class="tips">{{ tipsShow }}</span>
					<el-button
						type="primary"
						style="margin-left: 20px"
						@click="getOutlineInfo"
					>
						<i v-show="loadingT" class="el-icon-loading"></i>
						{{ $t('common.search') }}
					</el-button>
				</el-form-item>
				<el-form-item
						v-if="form.businessModel === 1"
						class="current_spetify_item"
						label="代理分润模式:"
						prop="commissionModel"
					>
						<el-select
							disabled
							style="width: 365px"
							v-model="form.commissionModel"
							:placeholder="
								$t('common.business_choose_default')
							"
						>
							<el-option :value="1" label="占成模式" />
							<el-option :value="2" label="佣金模式" />
						</el-select>
					</el-form-item>
				<el-form-item :label="$t('common.number_type') + ':'">
					<el-select
						v-model="form.accountType"
						size="medium"
						placeholder=""
						:disabled="true"
						style="width: 365px"
					>
						<el-option
							v-for="item in accountTypeArr"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item :label="$t('agent.current_superiors') + ':'">
					<el-input
						v-model="form.currentProxyName"
						size="medium"
						maxlength="11"
						:disabled="true"
						style="width: 365px"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="$t('agent.transfer_in_agent') + ':'"
					prop="transferProxyName"
				>
					<el-input
						v-model="form.transferProxyName"
						size="medium"
						maxlength="11"
						:placeholder="$t('common.please_enter')"
						clearable
						autocomplete="off"
						style="width: 365px"
						oninput="value=value.replace(/[\u4E00-\u9FA5]/g ,'')"
					></el-input>
				</el-form-item>
				<el-form-item
					label="申请信息:"
					prop="applyInfo"
				>
					<el-input
						v-model="form.applyInfo"
						size="medium"
						type="textarea"
						:placeholder="$t('common.please_enter')"
						clearable
						maxlength="50"
						show-word-limit
						style="width: 365px"
					></el-input>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						size="medium"
						@click="add"
					>
						{{ $t('common.submit') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						:disabled="loading"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
				</el-form-item>
			</el-form>
		</div>
		<el-dialog
				width="300px"
				:visible="!!eventId"
				:show-close="false"
				:close-on-click-modal="false"
				:destroy-on-close="true"
				title="会员转代资料提交成功"
			>
				<p>审核号：<a class="el-link el-link--primary" @click="goOpenProxyReview">{{ eventId }}</a> 等待审核结果</p>
				<div slot="footer" class="dialog-footer">
					<el-button type="primary" @click="eventId = undefined">
						返回
					</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { routerNames } from '@/utils/consts'
import list from '@/mixins/list'
import { notSpecial2, isHaveEmoji } from '@/utils/validate'
export default {
	name: routerNames.memberTransfer,
	mixins: [list],
	data() {
		this.getOutlineInfo = this.throttle(this.getOutlineInfo, 1000)
		this.add = this.throttle(this.add, 1000)
		return {
			loading: false,
			loadingT: false,
			eventId: undefined,
			form: {
				userName: '',
				accountType: '',
				transferProxyName: '',
				applyInfo: '',
				transferProxyId: undefined,
				currentProxyId: undefined,
				currentProxyName: undefined,
				commissionModel: undefined
			},
			tipsShow: null,
			tipsMerchantShow: null
		}
	},
	computed: {
		accountTypeArr() {
			return this.globalDics.accountType || []
		},
		rules() {
			const reg1 = /^[A-Za-z0-9]{4,11}$/

			const testUserName = (rule, value, callback) => {
				const isSpecial = !notSpecial2(String(value))
				const isRmoji = isHaveEmoji(String(value))
				if (isSpecial) {
					callback(new Error(this.$t('agent.rule_other_tip2')))
				} else if (isRmoji) {
					callback(new Error(this.$t('agent.rule_other_tip1')))
				} else if (!reg1.test(value)) {
					callback(new Error(this.$t('agent.rule_input_tip4-11')))
				} else {
					callback()
				}
			}

			const testApplyInfo = (rule, value, callback) => {
				const isSpecial = !notSpecial2(String(value))
				const isRmoji = isHaveEmoji(String(value))
				if (isSpecial) {
					callback(new Error(this.$t('agent.rule_other_tip2')))
				} else if (isRmoji) {
					callback(new Error(this.$t('agent.rule_other_tip1')))
				} else if (!value) {
					callback(new Error('请输入申请信息'))
				} else {
					callback()
				}
			}

			return {
				accountType: [
					{
						required: true,
						message: this.$t('agent.rule_select_tip_account_type'),
						trigger: 'change'
					}
				],
				merchantId: [
					{
						required: true,
						message: this.$t('agent.rule_select_tip_merchant'),
						trigger: ['change', 'blur']
					}
				],
				userName: [
					{
						required: true,
						validator: testUserName,
						trigger: 'blur'
					}
				],
				transferProxyName: [
					{
						required: true,
						validator: testUserName,
						trigger: 'blur'
					}
				],
				applyInfo: [
					{
						required: true,
						validator: testApplyInfo,
						trigger: 'blur'
					},
					{
						min: 2,
						max: 50,
						message: this.$t('agent.rule_length_tip2-50'),
						trigger: 'blur'
					}
				]
			}
		}
	},
	mounted() {},
	methods: {
		goOpenProxyReview () {
			this.$router.push({
				path: '/agent/agencyReview/transformationReview',
				query: {
					eventId: this.eventId
				}
			})
			this.eventId = undefined
		},
		selectMerchantHandle(merchantId) {
			if (merchantId) {
				this.tipsMerchantShow = null
			}
		},
		getOutlineInfo() {
			let lock = true
			const reg1 = /^[A-Za-z0-9]{4,11}$/
			const { userName, merchantId } = this.form
			if (!merchantId) {
				this.tipsMerchantShow = this.$t(
					'agent.rule_select_tip_merchant'
				)
				return
			} else {
				this.tipsMerchantShow = null
			}
			if (lock && reg1.test(userName)) {
				this.loadingT = true
				this.$api
					.getOutlineInfo({ userName, merchantId })
					.then((res) => {
						lock = false
						this.loadingT = false
						if (res?.code === 200) {
							if (res.data) {
								this.tipsShow = null
								this.form.accountType =
									res.data.accountType + ''
								this.form.currentProxyName =
									res.data.parentProxyName
								this.form.currentProxyId =
									res.data.parentProxyId
						
								this.form.businessModel = res.data.businessModel

								// 如果是现金模式
								if (this.form.businessModel === 1) {
									this.$api
									.getProxyDetailQueryDetail({
										userName: res.data.topProxyName,
										merchantId: res.data.merchantId
									}).then((res) => {
										if (res.code === 200) {
											this.form.commissionModel = res.data.commissionModel
										}
									})
								}
							} else {
								this.tipsShow =
									res.msg ||
									this.$t('agent.interface_exceptions')
							}
						} else {
							this.tipsShow =
								res?.msg ||
								this.$t('agent.interface_exceptions')
						}
					})
					.catch(() => {
						this.loadingT = false
						this.tipsShow = this.$t('agent.rule_account_tip')
						lock = false
					})

				setTimeout(() => {
					this.loadingT = false
					lock = true
				}, 1000)
			}
		},
		add() {
			this.loading = true
			const params = {
				...this.form
			}
			let lock = true
			this.$refs['form'].validate((valid) => {
				if (valid && lock && !this.tipsShow) {
					lock = false
					this.$api
						.memberTransAgentAPI(params)
						.then((res) => {
							this.loading = false
							lock = true
							if (res.code === 200) {
								this.eventId = res.data
								return
							}
							this.$message({
								message: res?.msg || this.$t('agent.interface_exceptions'),
								type: 'error'
							})
						})
						.catch(() => {
							this.loading = false
							lock = true
						})
				} else {
					this.tipsShow = null
				}
			})

			setTimeout(() => {
				this.loading = false
				lock = true
			}, 1000)
		},
		reset() {
			this.$refs['form'].resetFields()
			this.tipsShow = null
			this.tipsMerchantShow = null
			this.form = {
				userName: '',
				accountType: '',
				parentProxyName: '',
				agentName: '',
				applyInfo: ''
			}
		},
		checkValue() {
			this.tipsShow = null
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
.addAgent-container {
	background-color: #f5f5f5;
	margin: 0;
	min-height: calc(100vh - 105px);
	.line-member {
		height: 50px;
	}
	.addAgent-content {
		width: 1000px;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		position: relative;
		padding-top: 65px;
		padding-bottom: 65px;
		.form-header {
			height: 45px;
			line-height: 45px;
			span:nth-child(1) {
				position: absolute;
				left: 30px;
				top: 0;
				color: #666;
				font-size: 14px;
				font-weight: 700;
			}
			span:nth-child(2) {
				position: absolute;
				right: 30px;
				color: #999;
				font-weight: 400;
				font-size: 14px;
				top: 0;
			}
		}
		.tips {
			color: #f56c6c;
			font-size: 12px;
			line-height: 1;
			padding-top: 4px;
			position: absolute;
			top: 100%;
			left: 0;
		}
	}
	.addAgent-content::after {
		position: absolute;
		top: 45px;
		content: '';
		width: 100%;
		background-color: rgba(233, 233, 233, 1);
		height: 1px;
	}
}
</style>
